<!DOCTYPE html>
<html  xmlns:th="http://www.thymeleaf.org">

<head  th:replace="layouts::header">
   </head>

<body>

   <nav th:replace="layouts::navbar"></nav>
   <div  class="container">
       <h3>主面板</h3>
       <p th:text="${versionNumber}"></p>
         <hr>
         <div class="row">
            <div class="col-md-6">
               <h4>当前项目</h4>
                 <table class="table table-bordered table-striped">
                      <thead  class="thead-dark">
                         <tr>
                               <th>项目名称</th>
                                 <th>项目状态</th>
                         </tr>
                       </thead>
                      <tbody>
                            <tr th:each="aProject : ${projects}">
                                  <td  th:text="${aProject.name}"></td>
                                  <td th:text="${aProject.stage}"></td>
                            </tr>
                       </tbody>
                 </table>
            </div>
                       <div class="col-md-4">
                           <canvas id="myPieChart" height="50" width="50"></canvas>
                               <script>
                                 let charData = "[[${projectStatusData}]]"
                                 </script>
                       </div>
         </div>



     <div>
         <h4>当前学生</h4>
           <div class="row">
               <div class="col-md-6">
                 <table class="table table-bordered table-striped">
                    <thead class="thead-dark">
                      <tr>
                         <th>学生名称</th>
                          <th>微信号</th>
                            <th>项目个数</th>
                      </tr>
                    </thead>
                    <tbody>
                       <tr  th:each="aStudent :  ${studentProjects}">
                            <td th:text="${aStudent.name}"></td>
                            <td th:text="${aStudent.wechatId}"></td>
                            <td th:text="${aStudent.projectCount}"></td>
                        </tr>
                  </tbody>
                </table>
               </div>
          </div>
     </div>
   </div>
   <script type="text/javascript" th:src="@{js/myChart.js}"></script>

</body>
</html>